<template>
  <div>
    <div style="height:90vh;overflow: scroll">
      <!--下拉菜单-->
      <van-sticky>
        <div>
          <van-dropdown-menu active-color="#1989fa">
            <van-dropdown-item @change="onRegionChange" v-model="val1" :title="regionTitle" :options="regionOption"/>
            <van-dropdown-item @change="onLevelChange" v-model="val2" :title="LevelTitle" :options="LevelOption"/>
          </van-dropdown-menu>
        </div>
      </van-sticky>
      <!--院校列表展示-->
      <div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
              v-model="loading"
              :finished="finished"
              :error.sync="error"
              :offset="offset"
              :finished-text="universityList.length > 0 ? '没有更多了' : '暂无数据'"
              error-text="请求失败，点击重新加载"
              @load="onLoad"
          >
            <van-cell
                is-link
                v-for="u in universityList"
                :key="u.id"
                :to="{
                  name:'UniDetail',
                  params:{
                  status:1,
                  uniId:u.id,
                  uniName:u.name
              }
            }"
            >
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <span class="custom-title">{{ u.name }}</span>
                <van-tag type="primary">{{ u.typeName }}</van-tag>
                <van-tag v-if="u.level === '985'" class="custom-sort" type="warning">985</van-tag>
                <van-tag v-if="u.level === '211'" class="custom-sort" type="warning">211</van-tag>
              </template>
              <!-- 使用 label 插槽来自定义标题 -->
              <template #label>
                <span class="custom-label">{{ u.regionName }}</span>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </div>


    </div>
    <!--底部-->
    <Footer/>
  </div>
</template>

<script>
import Footer from "@/components/Footer";
import qs from "qs";

export default {
  name: "University",
  components: {Footer},
  data() {
    return {
      val1: 'a',
      val2: 'b',
      regionTitle: '地区',
      LevelTitle: '层次',
      regionOption: [],
      LevelOption: [
        {text: '层次', value: ''},
        {text: '985', value: '985'},
        {text: '211', value: '211'},
        {text: '双非', value: '双非'}
      ],
      universityDto: {
        regionName: '',
        level: '',
      },
      universityList: [],
      universityLength: 0,
      loading: false,
      finished: false,
      error: false,
      refreshing: false,
      offset: 0,
      pageNum: 1,
      pageSize: 7,
    };
  },
  methods: {
    //下拉列表刷新
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    //列表加载
    onLoad() {
      const params = {
        pageNum: this.pageNum++,
        pageSize: this.pageSize,
        universityDto: this.universityDto,
      }
      if (this.refreshing) {
        this.universityList = []
      }
      // 异步更新数据
      this.request.post('/api/university/selectByRegionNameAndSort', qs.parse(params)).then(res => {
        if (res.code === 1) {
          this.universityList = res.data
          // if (!this.$store.state.flag) {
          //   this.universityList = res.data
          //   this.$store.dispatch('isFlag', true)
          // } else {
          //   this.universityList = this.universityList.concat(res.data)
          // }
          setTimeout(() => {
            this.refreshing = false
          }, 1000)
          // 加载状态结束
          this.loading = false;
          this.finished = true;
        } else {
          this.error = true;
        }
      })
    },
    //选择层次
    onLevelChange(val) {
      this.LevelTitle = this.LevelOption.filter(v => v.value === val)[0].text
      //选择完地区了之后，发送请求获取新的院校数据
      this.universityDto.level = val
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        universityDto: this.universityDto,
      }
      this.request.post('/api/university/selectByRegionNameAndSort', params).then(res => {
        if (res.code === 1) {
          this.universityList = res.data
        }
      })
    },
    //选择地区
    onRegionChange(val) {
      this.regionTitle = this.regionOption.filter(v => v.value === val)[0].text
      //选择完地区了之后，发送请求获取新的院校数据
      this.universityDto.regionName = this.regionTitle === '地区' ? '' : this.regionTitle
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        universityDto: this.universityDto,
      }
      this.request.post('/api/university/selectByRegionNameAndSort', qs.parse(params)).then(res => {
        if (res.code === 1) {
          this.universityList = res.data
        }
      })
    },

  },
  created() {

    //查询院校列表
    this.request.get('/api/university/list').then(res => {
      if (res.code === 1) {
        this.$store.dispatch('getUniversityLength', res.data.length)
      }
    })

    //查询地区列表
    this.request.get('/api/region/list').then(res => {
      if (res.code === 1) {
        this.regionOption.push({text: '地区', value: '0'})
        for (let i = 0; i < res.data.length; i++) {
          let temp = {}
          temp.text = res.data[i].name
          temp.value = res.data[i].id
          this.regionOption.push(temp)
        }
      }
    })

    //发送请求模糊查询院校
    const params = {
      pageNum: this.pageNum,
      pageSize: this.pageSize,
      universityDto: this.universityDto,
    }
    this.request.post('/api/university/selectByRegionNameAndSort', qs.parse(params)).then(res => {
      if (res.code === 1) {
        this.universityList = res.data
      } else {
        this.$notify({
          type: 'danger',
          message: '请求院校信息失败'
        })
      }
    })
  }
}
</script>

<style scoped>
.custom-title {
  margin-left: 25px;
  margin-right: 4px;
  vertical-align: middle;
}

.custom-label {
  margin-left: 25px;
  margin-right: 4px;
  vertical-align: middle;
}

.custom-sort {
  margin-left: 5px;
}

</style>